<%--
  Created by IntelliJ IDEA.
  User: 64108
  Date: 15/3/2022
  Time: 下午6:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    User user = (User) session.getAttribute("user");
    System.out.println(user);
%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../css/upload.css">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../js/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css"/>
    <script type="text/javascript" src="../js/sweetalert.min.js"></script>
    <%-- 导入bootstrap依赖end --%>
    <link rel="stylesheet" href="../css/index.css">
    <%-- 设置页面session过期时间为15分钟--%>
    <%
         session.setMaxInactiveInterval(900);
    %>
</head>
<body>
<%@include file="plugins/navbar.jsp" %>

<div class="container body" style="margin-top: 60px">

    <div class="jumbotron dropBox" id="dropbox">
        <img src="fonts/img/information_add.png" class="img center-block"/>
        <P class="center-block up-info">将文件拖拽到此处上传</P>
        <input id="videoPath" type="hidden" name="video-name" value="">
        <table class="table">
            <tbody></tbody>
        </table>
        <br style="clear:both">
        <div class="row">
            <div class="col-md-1 col-md-offset-4">
                <button type="button" class="btn btn-info center-block" onclick="upload()">上传视频</button>
            </div>
            <div class="col-md-1 col-md-offset-1">
                <button type="button" class="btn btn-danger center-block" onclick="channel()">清空上传</button>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2 col-md-offset-1">
            <label class="text-center"><h4>上传封面</h4></label>

        </div>
        <div class="col-md-2">
            <input type="file" class="btn btn-cover" name="cover">
            <br>
            <div class="imgBox"><input type="hidden" value="" name="coverImg" id="coverImg">
                <img id="img-notice" src="fonts/img/information_add.png" class="img center-block"
                     style="margin-top: 22px;display:block"/>
                <img id="img-hide" src="" class="imgBox" style="display: none;margin-left: -2px;margin-top: -3px">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 col-md-offset-1">
            <h4 class="title-text" style="margin-top:70px ">
                上传视频名称
            </h4>
        </div>
        <div class=" col-md-5 form-group">
            <br>
            <br>
            <br>
            <input id="videoName" type="text" class="form-control" placeholder="请输入视频名称" name="videoName" value=""/>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 col-md-offset-1">
            <h4 class="title-text" style="margin-top:70px ">
                选择视频分类
            </h4>
        </div>
        <div class=" col-md-4 form-group">
            <div class="checkbox checkbox-info ">
                <input id="checkbox1" class="styled" type="radio" name="category">
                <label for="checkbox1">电影</label>
            </div>
            <div class="checkbox checkbox-info">
                <input id="checkbox2" class="styled" type="radio" name="category">
                <label for="checkbox2">动漫</label>
            </div>
            <div class="checkbox checkbox-info">
                <input id="checkbox3" class="styled" type="radio" name="category">
                <label for="checkbox3">纪录片</label>
            </div>
            <div class="checkbox checkbox-info">
                <input id="checkbox4" class="styled" type="radio" name="category">
                <label for="checkbox4">战争片</label>
            </div>
            <div class="checkbox checkbox-info">
                <input id="checkbox6" class="styled" type="radio" name="category" value="历史片">
                <label for="checkbox6">历史片</label>
            </div>
        </div>
        <div class=" col-md-3 form-group">
            <div class="checkbox checkbox-info ">
                <input id="checkbox2-1" class="styled" type="radio" name="category">
                <label for="checkbox2-1">vip</label>
            </div>
            <div class="checkbox checkbox-info">
                <input id="checkbox2-2" class="styled" type="radio" name="category">
                <label for="checkbox2-2">战争</label>
            </div>
            <div class="checkbox checkbox-info">
                <input id="checkbox2-3" class="styled" type="radio" name="category">
                <label for="checkbox2-3">综艺</label>
            </div>
            <div class="checkbox checkbox-info">
                <input id="checkbox2-4" class="styled" type="radio" name="category">
                <label for="checkbox2-4">战争片</label>
            </div>
            <div class="checkbox checkbox-info">
                <input id="checkbox2-5" class="styled" type="radio" name="category">
                <label for="checkbox2-5">历史片</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 col-md-offset-1">
            <h4 class="title-text" style="margin-top:70px ">
                输入视频简介
            </h4>
        </div>
        <div class=" col-md-3 form-group">
            <br/>
            <br/>
            <textarea id="describe" class="form-control" placeholder="视频主要简介" rows="4"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-3">
            <button id="confirm" class="form-control btn btn-primary" style="width: 120px;height: 30px">确认保存</button>
        </div>

    </div>

</div>

<script>
    //创建一个键值对存放需要上传的文件
    var formData = new FormData();
    var dragfile = document.getElementById('dropbox');
    dragfile.ondragover = function (ev) {
        ev.preventDefault();
        this.setAttribute('class', 'jumbotron dropedBox');
    }

    dragfile.ondragleave = function () {
        this.setAttribute('class', 'jumbotron dropBox');
    }

    dragfile.ondrop = function (ev) {
        this.setAttribute('class', 'jumbotron dropBox');
        ev.preventDefault();
        var files = ev.dataTransfer.files;
        var len = files.length, i = 0;
        var frag = document.createDocumentFragment();
        var tr, time, size;
        // var newForm = drag();
        // var it=newForm.entries(); //创建一个迭代器，测试用
        while (i < len) {
            tr = document.createElement('tr');
            size = Math.round(files[i].size * 100 / 1024) / 100 / 1024 + 'MB';
            time = files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toTimeString().split(' ')[0];
            tr.innerHTML = '<td>' + files[i].name + '</td><td>' + time + '</td><td>' + size + '</td>';
            console.log(size + ' ' + time);
            frag.appendChild(tr);
            //添加文件到newForm
            formData.append("file", files[i]);
            i++;
        }
        $('#dropbox table tbody').append(frag)
    }


    function upload() {
        if (document.getElementsByTagName('tbody')[0].hasChildNodes() == false) {
            swal({
                text: "给点很好康的？",
                button: "很刑"
            })
            return false;
        }
        // var newform = drag();
        var entries = formData.entries();
        console.log(entries.next());
        $.ajax({
            url: "../servlet/upload.do",
            type: 'POST',
            data: formData,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            dataType: "text",
            success: function (data) {
                if (data != null) {
                    var fileName = JSON.parse(data);
                    swal("视频上传成功！")
                    $('#videoPath').attr("value", fileName)
                }
            }, error: function (err) {
                console.log(err + "");
                console.log(typeof err)
                // var dataJson = JSON.parse(data);
                // console.log(dataJson);
            }
        })
    }

    function channel() {
        if (document.getElementsByTagName('tbody')[0].hasChildNodes() == false) {
            swal({
                text: "没有需要删除的",
                button: "ok"
            })
            return false;
        }
        $('#dropbox table tbody tr').empty()
    }

    $(function () {
        //文件的上传
        $(".btn-cover").change(function () {
            var file = $('.btn-cover')[0].files[0];
            //新建 formdata 格式
            var formData = new FormData();
            //将文件信息填入到 formdata 中
            formData.append("file", file);
            $.ajax({
                url: "../servlet/upload.do",
                method: "POST",
                async: true,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "text",
                success: function (data) {
                    var coverImgName = JSON.parse(data);
                    $('#img-notice').css('display', 'none');
                    $("#img-hide").attr("src", "/online_video/img/" + coverImgName);
                    $('#img-hide').css('display', '');
                    $('#coverImg').attr("value", coverImgName);
                }
            })
        })
        //点击登录按钮
        $('#confirm').click(function () {
            console.log("确认键被点击");
            console.log($("#videoPath").val());
            console.log($('#coverImg').val());
            console.log($('#videoName').val());
            console.log($('input[name=category]:checked').next().text());
            console.log($("#describe").val());
            $.ajax({
                async: true,
                url: "./video.do",
                method: "GET",
                dataType: "text",
                data: {
                    action: "insert",
                    videoPath: $("#videoPath").val(),
                    videoCover: $('#coverImg').val(),
                    videoName: $('#videoName').val(),
                    category: $('input[name=category]:checked').next().text(),
                    describe: $("#describe").val()
                },
                success: function (data) {
                    if (data != "") {
                        var stateCode = JSON.parse(data);
                        console.log(data);
                        if (stateCode === "1") {
                            swal('(^_^)文件上传成功！')
                        } else if (stateCode === "-1") {
                            swal('(#_#) 有选项未填写！请重试')
                        } else if (stateCode === "-2") {
                            swal({
                                icon: "error",
                                title: '(#_#)未登录,转跳登录界面',
                                button: {
                                    confirm: true,
                                    cancel: true,
                                }
                            }).then(function (isConfirm) {
                                if (isConfirm) {
                                    window.location.href = "./login.jsp"
                                }
                            })
                        }
                    } else {
                        swal('(#_#) 上传失败！请重试');
                    }
                }, error: function (err) {
                    console.log(err);
                    swal('(#_#) 连接失败！请重试');
                }
            })
        })
    })

</script>
</body>
</html>
